<template>
  <view class="container">
    <!-- 头部个人信息区域 -->
    <view class="profile-header">
      <view class="header-bg"></view>
      <view class="user-info">
        <view class="avatar-wrapper" @click="handleNavToLogin">
          <u-avatar :src="userInfo.avatar" size="60"></u-avatar>
        </view>
        <view class="text-info" @click="handleNavToLogin">
          <text class="username">{{ userInfo.isLoggedIn ? userInfo.account : '登录/注册' }}</text>
          <text class="slogan">{{ userInfo.isLoggedIn ? '欢迎回来！' : '欢迎登录，解锁更多精彩！' }}</text>
        </view>
        <view class="settings-icon" @click="handleNavSettings">
          <u-icon name="setting" color="#ffffff" size="24"></u-icon>
        </view>
      </view>
    </view>

    <!-- 订单/资产快捷入口 -->
    <view class="quick-access-card">
      <view class="access-item" @click="handleNavPage">
        <u-icon name="order" color="#0ea5e9" size="28"></u-icon>
        <text class="access-text">我的订单</text>
      </view>
      <view class="access-item" @click="handleNavPage">
        <u-icon name="rmb-circle" color="#10b981" size="28"></u-icon>
        <text class="access-text">我的钱包</text>
      </view>
      <view class="access-item" @click="handleNavPage">
        <u-icon name="coupon" color="#f59e0b" size="28"></u-icon>
        <text class="access-text">优惠券</text>
      </view>
      <view class="access-item" @click="handleNavPage">
        <u-icon name="server-fill" color="#ef4444" size="28"></u-icon>
        <text class="access-text">售后服务</text>
      </view>
    </view>

    <!-- 我的服务/常用功能 -->
    <view class="service-section">
      <view class="section-title">
        <u-icon name="grid" color="#0ea5e9" size="18"></u-icon>
        <text class="title-text">我的服务</text>
      </view>
      <u-grid :col="4" :border="false">
        <u-grid-item v-for="(item, index) in serviceItems" :key="index" @click="handleServiceClick(item)">
          <view class="service-icon-wrapper" :style="{backgroundColor: item.bgColor}">
            <u-icon :name="item.icon" :color="item.iconColor" size="24"></u-icon>
          </view>
          <text class="grid-text">{{ item.name }}</text>
        </u-grid-item>
      </u-grid>
    </view>

    <!-- 更多服务/其他功能 -->
    <view class="more-services-section">
      <u-cell-group :border="false">
        <template v-for="(item, index) in moreServiceItems">
          <u-cell :key="index" :title="item.name" :icon="item.icon" :icon-style="{color: item.iconColor, fontSize: '20px'}" :arrow="true" @click="handleActionClick(item)">
          </u-cell>
        </template>
        <u-cell title="退出登录" icon="lock-open" v-if="userInfo.isLoggedIn" :border="false" :icon-style="{color:  '#ef4444', fontSize: '20px'}" :arrow="true" @click="handleLoginOut()">
        </u-cell>
        <u-cell v-if="false" title="文件上传" icon="lock-open" :border="false" :icon-style="{color:  '#ef4444', fontSize: '20px'}" :arrow="true" @click="handleNavUpload()">
        </u-cell>
      </u-cell-group>
    </view>

    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: {
          isLoggedIn: false, // 模拟登录状态
          account: '点击登录/注册',
          avatar: 'https://picsum.photos/200/300?older.png' // 默认头像
        },

        // 常用服务
        /*
          { name: '地址管理', icon: 'map', iconColor: '#0ea5e9', bgColor: '#e0f2fe', path: '/pages/my/address' },
        */
        serviceItems: [
          { name: '我的收藏', icon: 'heart', iconColor: '#f59e0b', bgColor: '#fef3c7', path: '/pages/profile/favorite' },
          { name: '我的评价', icon: 'chat', iconColor: '#10b981', bgColor: '#dcfce7', path: '/pages/profile/review' },
          { name: '意见反馈', icon: 'question-circle', iconColor: '#8b5cf6', bgColor: '#f3e8ff', path: '/pages/profile/feedback' },
          { name: '我要招人', icon: 'man-add', iconColor: '#0ea5e9', bgColor: '#e0f2fe', path: '/pages/zhaopin/publish' },
          { name: '商家入驻', icon: 'home', iconColor: '#ef4444', bgColor: '#fee2e2', path: '/pages/shop/entry' },
          { name: '房源发布', icon: 'level', iconColor: '#d97706', bgColor: '#fef7cd', path: '/pages/house/deploy' },
          { name: '出租发布', icon: 'server-man', iconColor: '#06b6d4', bgColor: '#ecfdf5', path: '/pages/rentout/deploy' },
          { name: '查岗发布', icon: 'gift', iconColor: '#3b82f6', bgColor: '#e0f2fe', path: '/pages/traffic/deploy' }
        ],

        // 更多服务 (使用u-cell)
        moreServiceItems: [
          { name: '偏好设置', icon: 'setting', iconColor: '#64748b', path: '/pages/profile/preferences' },
          { name: '关于我们', icon: 'info-circle', iconColor: '#64748b', path: '/pages/about/about' },
          { name: '帮助中心', icon: 'question-circle', iconColor: '#64748b', path: '/pages/profile/help' }
        ]
      }
    },
    onShow() {
      // 模拟从本地存储获取登录状态和用户信息
      let token = this.vuex_token
      if (token) {
        this.userInfo = this.vuex_user
        this.userInfo.isLoggedIn = true
        this.fetchData()
      } else {
        this.userInfo = {
          isLoggedIn: false,
          name: '点击登录/注册',
          avatar: 'https://picsum.photos/200/300?eholder.png'
        }
      }

      // console.log(uni.$u.vuex)
      // console.log(this.vuex_token)
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/sysAuth/userInfo').then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            //清理tokoen
            this.$u.vuex('vuex_user', {})
            this.$u.vuex('vuex_token', '')
            this.userInfo.isLoggedIn = false
            return
          }
          this.userInfo = result
          this.userInfo.isLoggedIn = true
          // console.log(response.data);
        }).catch(err => {
          console.log(err)
        })
      },
      handleNavToLogin() {
        if (!this.vuex_token) {
          console.log('跳转到登录/注册页面=>模拟登录成功');
          // uni.navigateTo({ url: '/pages/auth/login' });
          // 模拟登录成功
          this.$u.route('/pages/login/login')
        } else {
          console.log('跳转到个人资料页面');
          // uni.navigateTo({ url: '/pages/my/profile-detail' });
        }
      },
      handleNavUpload() {
        this.$u.route('/pages/about/uploadFile')
      },
      handleNavSettings() {
        this.$u.route('/pages/profile/preferences')
      },
      handleNavPage() {
        this.$u.toast('功能开发中')
      },
      handleNavToWallet() {
        console.log('跳转到我的钱包页面');
        // uni.navigateTo({ url: '/pages/my/wallet' });
      },
      handleNavToCoupons() {
        console.log('跳转到优惠券页面');
        // uni.navigateTo({ url: '/pages/my/coupons' });
      },
      handleNavToAfterSales() {
        console.log('跳转到售后服务页面');
        // uni.navigateTo({ url: '/pages/my/after-sales' });
      },
      handleServiceClick(item) {
        // if (!this.vuex_token) {
        //   this.$refs.uToast.show({ message: '请先登录账号', type: 'success' });
        //   return
        // }
        this.$u.route(item.path)
      },
      handleActionClick(item) {
        if (item.action === 'lohandleNavut') {
          this.lohandleNavut();
        } else {
          this.$u.route(item.path)
        }
      },
      lohandleNavut() {
        uni.$u.http.post('/api/sysAuth/lohandleNavut').then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)

          }

          this.$u.vuex('vuex_token', '')
          this.$u.vuex('vuex_user', {})
          this.userInfo.isLoggedIn = false;
          this.userInfo.account = '点击登录/注册';
          this.$refs.uToast.show({ message: '已退出登录', type: 'success' });
          console.log('用户已退出登录');
          // console.log(response.data);
        }).catch(err => {
          console.log(err)
        }).finally(() => {

          this.userInfo.isLoggedIn = false
          this.$u.route('/pages/login/login')
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: calc(100vh - 100px);
    background: #f8fafc;
  }

  .profile-header {
    position: relative;
    height: 400rpx; // 头部背景高度
    overflow: hidden;

    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
      border-bottom-left-radius: 80rpx;
      border-bottom-right-radius: 80rpx;
      transform: scale(1.1); // 稍微放大，确保圆角效果
    }

    .user-info {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      padding: 120rpx 40rpx 0; // 留出状态栏和顶部空间

      .avatar-wrapper {
        margin-right: 32rpx;
        border: 4rpx solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
      }

      .text-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .username {
          font-size: 40rpx;
          font-weight: bold;
          color: white;
          margin-bottom: 8rpx;
        }

        .slogan {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.9);
        }
      }

      .settings-icon {
        margin-left: auto;
        padding: 16rpx;
        flex-shrink: 0;
      }
    }
  }

  .quick-access-card {
    position: relative;
    z-index: 15;
    margin: -100rpx 32rpx 32rpx; // 向上偏移，覆盖部分背景
    background: white;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;

    .access-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      padding: 16rpx 0;
      flex: 1;

      .access-text {
        font-size: 26rpx;
        color: #334155;
        font-weight: 500;
      }
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;
  }

  .service-section {
    background: white;
    margin: 0 32rpx 32rpx;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    .service-icon-wrapper {
      width: 88rpx;
      height: 88rpx;
      border-radius: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16rpx;
    }

    .grid-text {
      font-size: 24rpx;
      color: #334155;
      font-weight: 500;
      padding-bottom: 15upx;
    }
  }

  .more-services-section {
    background: white;
    margin: 0 32rpx 32rpx;
    border-radius: 24rpx;
    padding: 16rpx 0; // u-cell-group 内部有padding，这里减少
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

  }
</style>